
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MBTI专业测试报告</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="https://etnor.xyz/images/5518d579-b233-47a5-a67d-816bbc22f807.PNG" type="image/png">
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #00b894;
            --accent: #fdcb6e;
            --danger: #e17055;
            --bg: #f6f8fb;
            --card-bg: #fff;
            --border: #e3e6eb;
            --text: #222;
            --text-light: #888;
            --radius: 18px;
            --shadow: 0 4px 24px 0 rgba(80,120,200,0.09);
            --transition: .22s cubic-bezier(.4,0,.2,1);
        }
        html, body {
            height: 100%;
            background: var(--bg);
        }
        body {
            font-family: 'Inter', 'PingFang SC', 'Segoe UI', Arial, sans-serif;
            color: var(--text);
            min-height: 100vh;
            margin: 0;
        }
        /* 顶部导航栏 */
        .navbar {
            width: 100%;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            color: #fff;
            box-shadow: 0 2px 12px #b2bec333;
            padding: 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .navbar-inner {
            max-width: 900px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            padding: 0.7rem 2rem;
        }
        .navbar-logo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 1rem;
            box-shadow: 0 2px 8px #dbeafe;
            background: #fff;
            object-fit: cover;
        }
        .navbar-title {
            font-size: 1.25rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            flex: 1;
        }
        .navbar-cert {
            background: rgba(255,255,255,0.13);
            border-radius: 12px;
            padding: 0.4em 1.1em;
            font-size: 1.01rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            margin-left: 1.2em;
            box-shadow: 0 1px 4px #fff2;
        }
        /* 主体布局 */
        .container {
            max-width: 900px;
            margin: 2.5rem auto 0 auto;
            padding: 0 1.2rem 2.5rem 1.2rem;
        }
        .report-header {
            text-align: center;
            margin-bottom: 2.2rem;
        }
        .report-header h1 {
            font-size: 2.1rem;
            font-weight: 700;
            margin: 0 0 0.5rem 0;
            letter-spacing: 0.02em;
            color: var(--primary);
        }
        .report-header .meta {
            color: var(--text-light);
            font-size: 1.08rem;
            margin: 0.2em 0 0.5em 0;
        }
        .badge-animate {
            display: flex;
            justify-content: center;
            margin-bottom: 2.2rem;
        }
        .mbti-badge {
            background: linear-gradient(90deg, var(--primary) 60%, var(--secondary) 100%);
            color: #fff;
            padding: 1.2rem 2.5rem;
            border-radius: 32px;
            display: flex;
            align-items: center;
            gap: 1.2rem;
            font-size: 2.1rem;
            font-weight: 700;
            box-shadow: 0 4px 24px #6c5ce733;
            letter-spacing: 0.12em;
            animation: popIn .7s cubic-bezier(.4,2,.2,1);
        }
        .mbti-badge .type-desc {
            font-size: 1.1rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            margin-left: 1.2em;
            color: #fffbe7;
        }
        @keyframes popIn {
            0% { transform: scale(0.7); opacity: 0;}
            80% { transform: scale(1.08);}
            100% { transform: scale(1); opacity: 1;}
        }
        /* 维度分数区 */
        .dimension-section {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 2.5rem;
            justify-content: center;
        }
        .dimension-card {
            background: var(--card-bg);
            border-radius: 14px;
            box-shadow: var(--shadow);
            padding: 1.5rem 1.2rem 1.2rem 1.2rem;
            min-width: 210px;
            flex: 1 1 210px;
            max-width: 260px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            animation: fadeInCard .7s;
        }
        @keyframes fadeInCard {
            from { opacity: 0; transform: translateY(30px);}
            to { opacity: 1; transform: none;}
        }
        .dimension-title {
            font-size: 1.08rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 1.1rem;
            letter-spacing: 0.04em;
        }
        .score-bar-wrap {
            width: 100%;
            background: #f1f2fa;
            border-radius: 8px;
            height: 12px;
            overflow: hidden;
            margin-bottom: 0.7rem;
            margin-top: 0.2rem;
            position: relative;
        }
        .score-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary) 60%, var(--secondary) 100%);
            width: 50%;
            transition: width .7s cubic-bezier(.4,0,.2,1);
        }
        .score-labels {
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size: 0.98rem;
            color: var(--text-light);
            margin-bottom: 0.2rem;
        }
        .score-value {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary);
            margin-top: 0.2rem;
        }
        /* 维度解释区 */
        .traits-section {
            margin: 2.5rem 0 2.2rem 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1.5rem;
        }
        .trait-card {
            background: var(--card-bg);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 1.2rem 1rem 1.2rem 1.2rem;
            display: flex;
            align-items: flex-start;
            gap: 1.1rem;
            animation: fadeInCard .7s;
        }
        .trait-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 60%, var(--secondary) 100%);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            box-shadow: 0 2px 8px #6c5ce722;
            flex-shrink: 0;
        }
        .trait-info h4 {
            margin: 0 0 0.2em 0;
            font-size: 1.08rem;
            font-weight: 700;
            color: var(--primary);
        }
        .trait-info p {
            margin: 0;
            color: var(--text-light);
            font-size: 0.98rem;
        }
        /* 结果引导区 */
        .actions-section {
            display: flex;
            flex-wrap: wrap;
            gap: 1.2rem;
            justify-content: center;
            margin: 2.5rem 0 1.5rem 0;
        }
        .action-btn {
            background: linear-gradient(90deg, var(--primary) 60%, var(--secondary) 100%);
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0.9em 2.1em;
            font-size: 1.08rem;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 2px 8px #6c5ce733;
            transition: background .2s, transform .2s;
            letter-spacing: 0.04em;
        }
        .action-btn:hover {
            background: linear-gradient(90deg, var(--secondary) 60%, var(--primary) 100%);
            transform: translateY(-2px) scale(1.04);
        }
        /* 其他 */
        .footer-note {
            text-align: center;
            color: var(--text-light);
            font-size: 0.98rem;
            margin-top: 2.2rem;
        }
        @media (max-width: 700px) {
            .navbar-inner { padding: 0.7rem 0.7rem; }
            .container { padding: 0 0.2rem 2.5rem 0.2rem; }
            .dimension-section { gap: 1rem; }
            .traits-section { gap: 1rem; }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="navbar">
    <div class="navbar-inner">
        <img src="https://etnor.xyz/images/5518d579-b233-47a5-a67d-816bbc22f807.PNG" class="navbar-logo" alt="logo">
        <span class="navbar-title">MBTI专业测试报告</span>
        <span class="navbar-cert" id="certNo">证书编号：--</span>
    </div>
</nav>
<div class="container">
    <div class="report-header">
        <h1>🎉 恭喜你完成测试</h1>
        <div class="meta" id="metaInfo">耗时：-- | 预计准确度：--</div>
    </div>
    <div class="badge-animate">
        <div class="mbti-badge" id="mbtiBadge">
            <span id="mbtiType">----</span>
            <span class="type-desc" id="mbtiDesc">人格类型</span>
        </div>
    </div>
    <!-- 维度分数 -->
    <div class="dimension-section" id="dimensionSection">
        <!-- 动态填充 -->
    </div>
    <!-- 维度解释 -->
    <div class="traits-section" id="traitsSection">
        <!-- 动态填充 -->
    </div>
    <!-- 结果引导区 -->
    <div class="actions-section">
        <button class="action-btn" id="learnBtn">了解你的类型</button>
        <button class="action-btn" onclick="window.location.href='/'">再测一次</button>
        <button class="action-btn" id="shareBtn">分享报告</button>
    </div>
    <div class="footer-note" id="footerNote">
        生成于：--<br>
        *基于MBTI中国常模统计，维度题目数量根据判断难度有所差异
    </div>
</div>
<script>
    // 维度映射
    const DIMENSIONS = [
        {
            key: 'eiScore',
            title: '内向(I) - 外向(E)',
            left: { code: 'I', label: '内向', color: '#6c5ce7' },
            right: { code: 'E', label: '外向', color: '#00b894' },
            total: 24
        },
        {
            key: 'snScore',
            title: '直觉(N) - 实感(S)',
            left: { code: 'N', label: '直觉', color: '#fdcb6e' },
            right: { code: 'S', label: '实感', color: '#00b894' },
            total: 24
        },
        {
            key: 'tfScore',
            title: '理性(T) - 感性(F)',
            left: { code: 'T', label: '理性', color: '#6c5ce7' },
            right: { code: 'F', label: '感性', color: '#e17055' },
            total: 20
        },
        {
            key: 'jpScore',
            title: '知觉(P) - 判断(J)',
            left: { code: 'P', label: '知觉', color: '#fdcb6e' },
            right: { code: 'J', label: '判断', color: '#6c5ce7' },
            total: 25
        }
    ];

    // 人格类型描述（可根据需要扩展）
    const TYPE_DESC = {
        ESTP: "实干者 | 活力四射的冒险家",
        INFP: "治愈者 | 幻想家气质",
        ENFP: "竞选者 | 热情洋溢的自由灵魂",
        ISTJ: "检查员 | 可靠的现实主义者",
        // ...可补充更多类型
    };

    // 维度 trait 解释
    const TRAIT_DETAIL = {
        E: { icon: "E", name: "外向(Extraversion)", desc: "倾向于从外部世界获得能量，喜欢与人互动。" },
        I: { icon: "I", name: "内向(Introversion)", desc: "倾向于从内心世界获得能量，喜欢独处和思考。" },
        S: { icon: "S", name: "实感(Sensing)", desc: "关注现实和细节，注重实际经验。" },
        N: { icon: "N", name: "直觉(Intuition)", desc: "关注抽象和可能性，善于联想和创新。" },
        T: { icon: "T", name: "理性(Thinking)", desc: "以逻辑和客观事实为依据做决策。" },
        F: { icon: "F", name: "感性(Feeling)", desc: "以价值观和情感为依据做决策。" },
        J: { icon: "J", name: "判断(Judging)", desc: "喜欢有计划、有条理的生活方式。" },
        P: { icon: "P", name: "知觉(Perceiving)", desc: "喜欢灵活、开放的生活方式，适应变化。" }
    };

    // 获取 requestId
    function getRequestId() {
        const urlParams = new URLSearchParams(window.location.search);
        const urlRequestId = urlParams.get('requestId');
        return urlRequestId;
    }

    // 时间格式化
    function formatDate(str) {
        if (!str) return '--';
        const d = new Date(str);
        return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0')
            + ' ' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0') + ':' + String(d.getSeconds()).padStart(2,'0');
    }

    // 维度分数可视化
    function renderDimensions(data) {
        const html = DIMENSIONS.map(dim => {
            const score = data[dim.key];
            // score>0 右侧多，score<0 左侧多，score=0 各半
            const percent = Math.round((score + dim.total) / (2 * dim.total) * 100);
            return `
                <div class="dimension-card">
                    <div class="dimension-title">${dim.title} <span style="font-size:0.95em;color:var(--text-light);font-weight:400;">${dim.total}题</span></div>
                    <div class="score-labels">
                        <span style="color:${dim.left.color}">${dim.left.code}</span>
                        <span style="color:${dim.right.color}">${dim.right.code}</span>
                    </div>
                    <div class="score-bar-wrap">
                        <div class="score-bar" style="width:${percent}%;"></div>
                    </div>
                    <div class="score-value">
                        ${score > 0 ? `<span style="color:${dim.right.color}">${dim.right.label} +${score}</span>` : score < 0 ? `<span style="color:${dim.left.color}">${dim.left.label} ${score}</span>` : '中性 0'}
                    </div>
                </div>
                `;
        }).join('');
        document.getElementById('dimensionSection').innerHTML = html;
    }

    // 维度解释卡片
    function renderTraits(type) {
        if (!type) return;
        const html = type.split('').map(t => {
            const trait = TRAIT_DETAIL[t];
            if (!trait) return '';
            return `
                <div class="trait-card">
                    <div class="trait-icon">${trait.icon}</div>
                    <div class="trait-info">
                        <h4>${trait.name}</h4>
                        <p>${trait.desc}</p>
                    </div>
                </div>
                `;
        }).join('');
        document.getElementById('traitsSection').innerHTML = html;
    }

    // 填充报告
    function fillReport(data) {
        // 证书编号
        document.getElementById('certNo').textContent = '证书编号：' + (data.cartNo || '--');
        // 人格类型
        document.getElementById('mbtiType').textContent = data.type || '----';
        document.getElementById('mbtiDesc').textContent = TYPE_DESC[data.type] || '人格类型';
        // 维度分数
        renderDimensions(data);
        // 维度解释
        renderTraits(data.type);
        // 生成时间
        document.getElementById('footerNote').innerHTML =
            `生成于：${formatDate(data.createdAt)}<br>
                *基于MBTI中国常模统计，维度题目数量根据判断难度有所差异`;
        // 头部信息（可根据实际数据调整）
        document.getElementById('metaInfo').textContent =
            `耗时：-- | 预计准确度：--`;
        // 了解类型按钮
        document.getElementById('learnBtn').onclick = function() {
            if (data.type) {
                window.open(`https://www.16personalities.com/zh/${data.type.toLowerCase()}-personality`, '_blank');
            }
        };
    }

    // 分享功能
    document.getElementById('shareBtn').onclick = function() {
        const url = window.location.href;
        if (navigator.share) {
            navigator.share({
                title: 'MBTI专业测试报告',
                text: '快来看看我的MBTI测试结果吧！',
                url
            });
        } else {
            navigator.clipboard.writeText(url);
            this.textContent = '已复制链接！';
            setTimeout(() => { this.textContent = '分享报告'; }, 1800);
        }
    };

    // 拉取数据
    async function fetchAndRender() {
        const requestId = getRequestId();
        if (!requestId) {
            alert('未找到 requestId');
            return;
        }
        try {
            const res = await fetch(`/api/mbti/detail?requestId=${requestId}`);
            const json = await res.json();
            // 这里判断 data 是否为空
            if (json.code !== 200 || !json.data) {
                window.location.href = '/404.html';
                return;
            }
            if (json.code !== 200 || !json.data) throw new Error('数据异常');
            fillReport(json.data);
        } catch (e) {
            alert('报告加载失败，请稍后重试');
        }
    }

    document.addEventListener('DOMContentLoaded', fetchAndRender);
</script>
</body>
</html>
